Calvosaez me preguntaba como añadir una imagen de fondo a la sidebar.
He recordado una entrada de Rosa donde explica como añadir una ´´sidebar colorida`` basándose en las explicaciones de Blogger Hacked
Rosa le añade algún extra a la CSS para personalizar la sidebar, ya su vez voy a darle un retoque para intentar así esclarecer un poco las dudas de Calvosaez.
En un principio le añadiremos color a la sidebar con el truco original de Blogger Hacked.
Nos debemos situar en Plantilla/HTML vamos a añadir justo encima de ]]></b:skin> lo siguiente:
.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}
Luego justo antes del </head> de la plantilla añadimos este código:
<script src='http://bloggerhacked.googlepages.com/prototype.js' type='text/javascript'></script>
<script src='http://bloggerhacked.googlepages.com/evenodd.js' type='text/javascript'></script>
El resultado sería algo así:

Si deseamos añadir un borde o redondear las esquinas Rosa nos propone añadir lo siguiente:
.even {
background-color: #EEEEEE;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}
.odd {
background-color: #AAAAAA;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}
El resultado sería el siguiente:

Ahora vamos a dar solución a Calvosaez con la idea de añadir una imagen de fondo.
Nos situaremos en el primer código añadido osea en:
.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}
Y agregaremos background:url('aquí la url de la imagen'); en lugar de background-color: #AAAAAA; y background-color: #EEEEEE; de manera que quedaría asi:
.even {
background:url('aquí la url de la imagen');
}
.odd {
background:url('aquí la url de la imagen');
}
El resultado sería más o menos este:

Recordad que la opción de añadir color hará que cada nuevo elemento añadido en la sidebar aparezca envuelto en un cuadro donde podéis alternar colores escogidos previamente.
!Suerte¡
Gracias Gema te devo una, ya te contare como me queda, creo que voy a tener poco tiempo estos dos meses que entran pero lo dejo grabado para practicarlo, saludos
Que tu ausencia sea para bien
Hola Gema, ante todo gracias, yo hago un blog de ayuda para los usuarios de mi cibercafé... que la necesitan bastante... jajaja, en este caso yo también, así que agradacerte tu ayuda y sobre todo tu amabilidad. ¡Sigue así!
Saludos y bienvenido shit happens me alegra que te sea de utilidad lo que encuentras aquí.
Otro día déjame la url de tu blog me gustará verlo
Hola Gema, ¡gracias por no llamarme shit! he de recordar cambiarme el nick jajaja... precisamente ahora estoy añadiendo una linea a la sidebar según tus explicaciones, la verdad que por más inútil que soy, gracias a ti sólo puede salirme bien... mi nombre es vanessa y el blog que hago para el ciber se llama clavedesolcibercafe, alojado en blogspot... acabo de añadir tambien un montón de libros para descargar (irá creciendo la lista) así que sois bienvenidos a visitarlo (no flipéis con las entradas, explico conceptos hiperbásicos porque es lo que la mayoria necesita cuando llega al ciber). Gracias y ¡allá voy a por la líea de la sidebar! Un saludo enorme a todos en quienes pervive ese espléndido espiritu de cooperación.
Gracias Vanessa es un gran trabajo el que estás realizando.
Si me necesitas ya sabes donde encontrarme
Hola gema, buen blog..
mira el truco no me funciona, pero creo que ya encontre el problrma.
Al intentar acceder directamente alos scripts en googlepages me sale que la banda ancha se a exedido,, podrias mandarelos a mi mail, por favor,
hc.0000111@gmail.com
Pues ahora mismo están funcionando HC.0000111
Gema, gracias por tu blog... Nos hace a muchos las cosas mas faciles... Tengo un problema, no quiero la sidebar con un fondo, solo quiero el borde ¿que hago?
Klgo. Alexis Moya R. menudo nombrecito eh

Si deseas un borde en la sidebar puedes ver como hacerlo aquí, si es una sola línea aquí, si el borde es redondeado aquí.
La imaginación cuenta mucho a la hora de personalizar el blog, me sorprende gratamente ver como de una pequeña explicación añaden algo nuevo.
¿Me avisas que vea el resultado?
Hola gem@ mira quiero ponerle una imagen a la sidebar, pero el script ese ya no funciona, ha extralimitado el limite de banda, donde puedo conseguirlo?
Para alojarlo en mi servidor tengo que encontrarlo primero, sino como hago??
Tambien quiero poner una imagen de fondo en el main, pero todavía no se como hacerlo, si me das una mano te agradecería, es para un blog nuevo que estoy haciendo, las imagenes ya las tengo pero no se como ponerlas ni donde, la plantilla es la minima como la tuya.
Besooootes!
Es cierto k_nelita y desde que he leído tu comentario no he parado de darle vueltas pero según el autor ya no está en funcionamiento por sobrepasar la banda ancha de Google Pages.

Ahora bien, si lo que deseas es añadir una imagen a la sidebar puedes hacerlo añadiendo unas líneas a la CSS mira esta entrada y compruébalo
En el main es más o menos lo mismo sólo que en vez de añadir las líneas de código en #sidebar-wrapper hay que hacerlo en #main-wrapper {
Este cambio en #main-wrapper { hará que la imagen ocupe todo el largo del main, si deseas que ocupe solamente el espacio de las entradas debes añadir las líneas de código en .post {
El cambio es increíble para el poco trabajo que representa, ve mirando en vista previa y verás los resultados.
Quiero ver la obra de arte eh
Ahora me pongo a esto, pero ve mirando mi otra obra que recién terminé, los emoticones en una imagen junto con los html y todo lo demás, juaaa, es un poco grande la imagen pero así la gente se entera de lo que puede utilizar, al menos si son tan burros como yo,
que nunca se como se hacen los emoticones, creo que lo expuse muy claramente.
Besotes gem@ gracias por todo, me voy a seguir trabajando con lo que me has dicho a ver que sale
Quedan estupendos
La verdad qué tu blog es fantástico, te felicito, de corazón.
Te digo, necesito saber como haces para poner en la parte del sidebar que dice " Traductor, Blogroll " etc; poniendo una imagen..
Si podés averiguar, avisame...
Te mando un saludo.
Hola Emiliano bienvenido.
Para personalizar los títulos de la sidebar hay varias opciones una de ella la de la imagen y puedes verlo como primer ejemplo en esta entrada.
Si te asaltan dudas házmelo saber
Acabo de ver esta entrada y me parece muy buena, pero la falla que le veo al código es que sólo funciona con Firefox, Safari y Google Chrome. ¿No tendrás alguno que sirva para el resto de los navegadores?
Puma de Sangre Azul las redondeces en Explorer no son nada sencillas, sin embargo hay una entrada de J.MIur que te puede interesar.
(Mira aquí)
Hola! me gusta tu blog =D es buena la explicación solo q tengo una duda... lo q pasa esq yo kiero ponerle un dondo a mis widgets... el mismo a todos pero dond lo ago keda cortado, no llega asta el final d cada widget o si no le falta xq el alto es menos q la imagen q pongo...
quisiera q me dijeras como acerle para q la imagen ocupe todo el alto de los wigets... sin repetirc, q se stire o contraiga segun sea necesario, x asi decirlo
espero puedas respondrme xq stube tratando pero no pude u.u si no me ntiends pasa a mi blog y ve como me keda... http://aradeus-geornio.blogspot.com/
d antemano gracias!!!
Necros Giovanni hasta donde yo sé eso no puede hacerse con una sola imagen, es difícil que una imagen vaya extendiéndose.
Si añadimos una image tipo textura o degradado no sería problema porque se repite y se muestra siempre igual, de no ser así es necesario tres imágenes una para el encabezado, otra para el cuerpo y la última para añadirla al final del gadget
muchas gracias x aclararmelo ^^ bueno, en ese caso solo kizierda q me dijeras como poner una imagen al final de el gadget (si se puede q kede para todos la misma mejor) te lo agradeseria mucho xq no encontre tampoco ningun titorial para eso
GRACIAS d nuevo x todo y x responder tan rapido
Pero depende de la imagen Necros mira por ejemplo este blog de k_nelita http://folktan.blogspot.com/
Esa imagen está añadida en la css, la parte de .sidebar .widget
.sidebar .widget{
background: #FFFFFF url(aquí-url-de-la-imagen) no-repeat left top;
margin:0 0 0.7em;
padding:10px;
}
Todo depende de la imagen, si es una textura simplemente se añade
background: #000 url(aquí-url-de-la-imagen);
Hola! gracias por tu post, me sirvió mucho... ahora resta un solo inconveniente, necesito que el texto del título comience unos milimetros despues que la imagen de fondo de los widgets; podrías ayudarme con eso? Un saludo, Gracias!
3705 Necesito ver tu blog para eso
Ok, esta es la dirección: http://postabanana.blogspot.com/
Un saludo y muchas gracias!
hola gema, ya aplique este efecto en mi blog y accidentalmente me quedo perfecto con la imagen de fondo de los titulos de cada widget.
Ahora me interesaria aplicar exactamente lo mismo pero en cada post.
Yo fui probando varias posibilidades sin lograr nada, ya que yo quiero que abarque el titulo, las etiquetas, el contenido y los comentarios
( 0 comentarios ).
El blog al que me refiero es http://pablorizia.blogspot.com, desde ya muchas gracias
Si añades la imagen en cualquiera de ellos no cubrirá todo el contenido se vería cortada
y agregarle color en ves de una imagen pero aplicadno este efecto seria lo mismo?
Mira esta entrada:
http://gemablog-.blogspot.com/2008/08/dividir-secciones-con-css.html
Para que cubriera todo el post (Título, contenido y pos-fotter) sería añadir en los estilos del
post lo siguiente:
.post {
aquí estarían tus estilos..
aquí estarían tus estilos..
aquí estarían tus estilos..
background:#000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
Gracias por la ayuda que ofreces.
Tengo qe acabar de diseñar el blog. Lo hago poco a poco y disfruto de los resultados.
Dejo este mensaje para que sepas que has ayudadoa una más.
Saludos!!!
Si quieres, puees echar unvistazo.
Gracias por la ayuda que ofreces.
Tengo qe acabar de diseñar el blog. Lo hago poco a poco y disfruto de los resultados.
Dejo este mensaje para que sepas que has ayudadoa una más.
Saludos!!!
Si quieres, puees echar unvistazo.
(falta porquito para tu santo)
¡¡ F e l i c i d a d e s !!
no entiendo bien el codigo de imagen de fondo de sidebar. me darías un ejemplo?
Lee donde dice "Si en lugar de añadir color queremos añadir una imagen de fondo bastará con sustituir background:#cc9999; por background:url('url-de-tu-imagen');"
hola gem@, quería saber si es posible rellenar los espacios de relleno del formulario con color en http://wanttobuymywork.blogspot.com.
thankiu
vale. no pasa nada. así igual queda "mono".
hola gem@, me gustaría añadir color solo a un widget de la sidebar. sé que es posible porque ya lo hice, pero ahora mismo no recuerdo cómo... el santo se me va al cielo todos los días un ratito... a
zz
http://gemablog-.blogspot.com/2009/05/anadir-estilos-un-gadget.html
Eres la mejor, llevo 2 horas ya hasta que no te encontré no dí con ello! Gracias de verdad!
Muy buenas Gemma, voy a guardarme el link de esta pagina, porque estoy empezando a aprender Html y la verdad es que ya he venido a este blog varias veces.
En fin, quisiera hacerte varias preguntas:
Primera es que en mi blog http://laincreiblevulnerabilidaddelser.blogspot.com/ el fondo central se queda a mitad del sidebar, con lo que al cambiar el color de fondo no lo consigo con la otra parte del sidebar.
Segundo es que he utilizado el codigo que has puesto aqui, y me ha funcionado la primera vez, pero a partir de ahi, cuando vuelvo a cargar la pagina ya no aparece.
Y tercera y ultima, ayer estuve buscando un "Show last comments" widget en español, porque el que tengo, que es de blogger, esta en ingles y queda un poco desafinado. Y he visto que el tuyo esta muy bien. He mirado en el codigo fuente de tu pagina pero no he conseguido sacar nada, si me dices donde lo puedo conseguir... Ya te agregaria en favoritos y todo.
Muchas gracias por la ayuda ya prestada.
Un saludo
Sobre personalizar la sidebar para darle color sigue mejos en siguiente
Lo que entiendo como Show last comments son los últimos comentarios, o comentarios recientes, eso puedes verlo en este otro
Hola Gema, quería hacerte una consulta...he puesto tres widgets a modo de botÓn, enlazados cada uno con una pagina estática...(creo que es eso)pero la imagen del boton se me queda demasiado a la derecha, es decir, no queda centrada con respecto a los demás widgets que vienen debajo...y no se como arreglarlo...
si me pudieras dar alguna idea...
muchas gracias!!
Mira la imagen: http://lh3.ggpht.com/_ujJR5M74kL8/S_2YM0IWNTI/AAAAAAAACWo/E6cb87K4X4A/botoncontacto260.gif
Muy interesante. Justamente me estaba preguntado si era posible ponerle fondo a la sidebar, pero ahora tengo una pregunta ¿mas o menos de cuanto aconsejas que sea la imagnen= a mi me gustaria hacer un fondo con bordes, pero se me hace que si lo hago con bordes, no se ajustaria a la medida del alto de la sidebar, y en el futuro, cuando quisiera ñadir mas elemento en la sidebar, el fondo no le quedaria tan bien
Si no recuerdo mal fue Oloman de el que hizo una entrada tipo tutorial http://oloblogger.blogspot.com/
Ya veo. Intente hacer lo que explica esta entrada, y todo me hubiera salido fantastico, si no hubiera sido porque tengo un singinbox en la barra lateral (una lista de reproducciones), y cuando puse todos los codigos, me di conque no dejaba que presiones lo botosnes
, pero bueno, ya vere que otra cosa intento
.
PS: gracias por intentarme ayudar con el link
he de decir que esto es una gran mierda no me ha ayudado absolutamente en nada ni explica claramente lo que hay que hacer
Es curioso, pero te has parado a pensar que esta mierda le ha funcionado a otros con la misma explicación??
Hola, perodn por las molestia, consulta en style para poder agregar bottom img como puedo hacer?
. Gracias Saludos.
Intente de todo
Nota: solo los miembros de este blog pueden publicar comentarios.